<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>拖拽排序</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>

    <style>
        #sortableBox5{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #sortableBox5 li{
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid #ddd;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px 10px 0;
            user-select: none;
            cursor: move;
        }
        #sortableBox5 li:hover{
            background-color: lightsalmon;
            color: #fff;
        }
        .ui-state-highlight {
            background-color: #f3f3f3;
        }
    </style>
</head>

<body class="bg-gray">
    <div class="wrapper wrapper-container">
        <div class="row">
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-heading">
                        全局拖拽排序
                    </div>
                    <div class="panel-body">
                        <div id="sortableBox1">
                            <div class="card bg-white border-gray padding-10" style="user-select: none;cursor:move">
                                测试拖拽排序数据1
                            </div>
                            <div class="card bg-white border-gray padding-10" style="user-select: none;cursor:move">
                                测试拖拽排序数据2
                            </div>
                            <div class="card bg-white border-gray padding-10" style="user-select: none;cursor:move">
                                测试拖拽排序数据3
                            </div>
                            <div class="card bg-white border-gray padding-10" style="user-select: none;cursor:move">
                                测试拖拽排序数据4
                            </div>
                            <div class="card bg-white border-gray padding-10" style="user-select: none;cursor:move">
                                测试拖拽排序数据5
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-heading">
                        局部拖拽排序
                    </div>
                    <div class="panel-body">
                        <div id="sortableBox2">
                            <div class="card bg-white border-gray padding-10 ">
                                局部拖拽排序1
                                <div class="pull-right">
                                    <a href="javascript:;" class="move text-default" style="cursor: move;">
                                        <i class="fa fa-fw fa-arrows"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card bg-white border-gray padding-10 ">
                                局部拖拽排序2
                                <div class="pull-right">
                                    <a href="javascript:;" class="move text-default" style="cursor: move;">
                                        <i class="fa fa-fw fa-arrows"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card bg-white border-gray padding-10 ">
                                局部拖拽排序3
                                <div class="pull-right">
                                    <a href="javascript:;" class="move text-default" style="cursor: move;">
                                        <i class="fa fa-fw fa-arrows"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card bg-white border-gray padding-10 ">
                                局部拖拽排序4
                                <div class="pull-right">
                                    <a href="javascript:;" class="move text-default" style="cursor: move;">
                                        <i class="fa fa-fw fa-arrows"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="card bg-white border-gray padding-10 ">
                                局部拖拽排序5
                                <div class="pull-right">
                                    <a href="javascript:;" class="move text-default" style="cursor: move;">
                                        <i class="fa fa-fw fa-arrows"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-heading">
                        网格排序
                    </div>
                    <div class="panel-body" style="height: 300px;overflow: auto;">
                        <ul id="sortableBox5">
                            <li>
                                网格1
                            </li>
                            <li>
                                网格2
                            </li>
                            <li>
                                网格3
                            </li>
                            <li>
                                网格4
                            </li>
                            <li>
                                网格5
                            </li>
                            <li>
                                网格6
                            </li>
                            <li>
                                网格7
                            </li>
                            <li>
                                网格8
                            </li>
                            <li>
                                网格9
                            </li>
                            <li>
                                网格10
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="panel">
                    <div class="panel-heading">
                        拖拽连接列表
                    </div>
                    <div class="panel-body" style="height: 300px;">
                        <div class="row">
                            <div class="col-xs-6">
                                <div id="sortableBox3" class="connectedSortable" style="min-height:100px;">
                                    <div class="card bg-primary text-white border-gray padding-10 ">
                                        拖拽连接A1
                                    </div>
                                    <div class="card bg-primary text-white border-gray padding-10 ">
                                        拖拽连接A2
                                    </div>
                                    <div class="card bg-primary text-white border-gray padding-10 ">
                                        拖拽连接A3
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-6">
                                <div id="sortableBox4" class="connectedSortable" style="min-height:100px;">
                                    <div class="card bg-warning text-white border-gray padding-10 ">
                                        拖拽连接B1
                                    </div>
                                    <div class="card bg-warning text-white border-gray padding-10 ">
                                        拖拽连接B2
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>


    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#sortableBox1").sortable({
                revert: true,
                scroll: true,
            });
            $("#sortableBox2").sortable({
                revert: true,
                scroll: true,
                handle: ".move"
            });
            $("#sortableBox3,#sortableBox4").sortable({
                connectWith: ".connectedSortable"
            }).disableSelection();
            $("#sortableBox5").sortable({
                placeholder: "ui-state-highlight"
            });
        });
    </script>
</body>

</html>